<template>
        <div id="BottomDetail">
            <el-row>
                <el-col :span="8" style="padding-right: 1%;padding-left: 1%;height: 100%;">
                    <div class="child" ref="chart1" >
                        <div class="top">学院信息</div>
                        <div id="chart1"  style="height:89%;width: 100%;" ></div>
                    </div>
                </el-col>
                <el-col :span="8" style="padding-right: 1%;padding-left: 1%;height: 100%;">
                    <div class="child">
                        <div class="top">缴费凭证</div>
                        <div id="billstatus" v-if="dialogImageUrl==''">缴费状态：<span>暂未上传缴费凭证</span></div>
                        <div id="billimg" v-if="dialogImageUrl!=''">
                            <img :src="dialogImageUrl" style="height: 100%;object-fit: cover;width: 100%;">
                        </div>
                    </div>
                </el-col>
                <el-col :span="8" style="padding-right: 1%;padding-left: 1%;height: 100%;">
                    <div class="child"> 
                            <el-calendar v-model="value">
                            </el-calendar>
                    </div>
                </el-col>
            </el-row>
        </div>
</template>
<script>
import axios from 'axios';

export default {
    data(){
        return{
            userdetail: {
                billstatus: 0 //0未缴费，1缴费
            },
            value: new Date(),
            dialogImageUrl:"",
        }
    },
    props:{
        collegedata: [],
        studentdetail:{},
    },
    methods:{
        //学院信息图标绘制
        tubiao(){
            var chartDom = document.querySelector('#chart1');
            // console.log(chartDom);
            var myChart = this.$echarts.init(chartDom);
            var option;

            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {//调整描述栏
                    top: '25%',
                    right: '10%',
                    orient: "vertical"
                },
                series: [//饼状图
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['30%', '60%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2,
                            color: function (colors) {
                                var colorList = ['#b6a2de', '#5bb1ef', '#2fc7c9', '#68e0e3'];
                                return colorList[colors.dataIndex];
                            }
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: this.collegedata,
                        center: ["30%", "50%"]//饼状图的圆心左边 （x,y）
                    }
                ]
            };

            option && myChart.setOption(option);
        },

    },
    mounted(){
        var _this=this;
        //动态绘制图标
        this.$nextTick(() => {
            this.tubiao();
        })
        axios({
            method: "get",
            url: "img/back/download/" + _this.studentdetail.iid,
        }).then(function (resp) {
            _this.dialogImageUrl = resp.data.msg;
        })
    },
    
}
</script>
<style scoped>
#BottomDetail{
    margin-top: 15px;
    float: left;
    width: 100%;
    height: 40%;
}
#BottomDetail>div{
    height: 100%;
}
#BottomDetail .child{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgb(0 0 0 / 12%), 0 0 6px rgb(0 0 0 / 4%);
}

#BottomDetail .child .top{
    width: 90%;
    margin-left: 5%;
    height: 11%;
    text-align: left;
    font-size: 16px;
    line-height: 30px;
    text-indent: 2em;
    color: #909399;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}
#BottomDetail #billstatus{
    height: 15%;
    text-align: left;
    text-indent: 50px;
    color: #606266;
    line-height: 40px;
    font-size: 13px;
}
#BottomDetail #billimg{
    height: 80%;
    width: 80%;
    margin-left: 10%;
    margin-top: 5%;
}
#chart1>div{
    width: 100%;
    background-color: black;
}
/deep/ .el-calendar{
    height: 100%;
}
/deep/ .el-calendar__header{
    height: 8%;
    font-size: 10px;
    padding-top: 1%;
    padding-bottom: 1%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #EBEEF5;
}
/deep/  .el-calendar-table thead th{
    padding-top:5px;
}

/deep/  .el-calendar__body{
    height: 88%;
    padding-bottom: 0px;
    padding-top: 0%;
}
/deep/ .el-calendar-table{
    height: 100%;
}
/deep/ .el-button-group>.el-button{
    padding-bottom: 2%;
    padding-top: 2%;
}
/deep/ .el-calendar-table .el-calendar-day {
    padding: 0;
}


/deep/ .el-calendar-table td.is-today {
    background-color: #fff;
}


/deep/ .el-calendar-table td.is-selected {
    background-color: #fff;
}

/deep/ .el-calendar-table .el-calendar-day {
    height: 0px;
    font-size: 12px;
    text-align: center;
}

/deep/ .el-calendar-table__row{
    height: 17%;
}

/deep/ .el-calendar-table:not(.is-range) td.prev {
    .calendarFont {
        color: #C0C4CC;
    }

    pointer-events: none;
}


/deep/ .el-calendar-table thead th {
    font-size: 12px;
    padding-bottom: 6px;
}
</style>